<template>
    <div style="border: 1px solid #ccc;">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
        <Editor style="height: 150px; overflow-y: hidden;" v-model="childTitle" :defaultConfig="editorConfig" :mode="mode"
            @onCreated="onCreated" />
    </div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'

export default {
    name: "WangEditor",
    components: { Editor, Toolbar },
    props: {
        title: String,
    },
    data() {
        return {
            editor: null,
            toolbarConfig: {},
            editorConfig: { placeholder: '请输入内容...' },
            mode: 'default',
            childTitle: this.title,
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor)
        },
    },

    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy()
    },
    watch: {
        title: {
            handler() {
                this.childTitle = this.title;
            },

        },
    }
}
</script>